<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <script src="./layui/layui.js"></script>
</head>

<style>
    .k-w {
        border: 1px solid #000;
        width: 300px;
        margin: 0 auto;
        padding-bottom: 10px;
    }

    .tu-qu {
        height: 150px;
        line-height: 150px;
    }

    .tu-qu img {
        height: 60px;
    }

    .title {
        height: 25px;
        line-height: 25px;
        font-size: 20px;
    }

    .title-f {
        height: 40px;
        line-height: 40px;
        font-size: 16px;
    }

    .layui-form-radio {
        padding: 0;
        margin: 0;
    }

    .layui-form-radio>i {
        margin-right: 0px;
        font-size: 22px;
    }
</style>

<body>
    <form class="layui-form" action="">
        <div class="layui-container">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md4" style="text-align: center;">
                    <div class="k-w">
                        <div class="tu-qu">
                            <img src="./img/lable.png" alt="">
                        </div>
                        <div class="title">文字模板</div>
                        <div class="title-f"></div>
                        <input type="radio" name="moduleType" value="1" checked>
                    </div>

                </div>
                <div class="layui-col-md4" style="text-align: center;">
                    <div class="k-w">
                        <div class="tu-qu">
                            <img src="./img/Image.png" alt="">
                        </div>
                        <div class="title">图模板</div>
                        <div class="title-f"></div>
                        <input type="radio" name="moduleType" value="2">
                    </div>
                </div>
                <div class="layui-col-md4" style="text-align: center;">
                    <div class="k-w">
                        <div class="layui-row tu-qu">
                            <div class="layui-col-xs6 layui-col-md6">
                                <img src="./img/lable.png" alt="">
                            </div>
                            <div class="layui-col-xs6 layui-col-md6">
                                <img src="./img/video.png" alt="">
                            </div>
                        </div>
                        <div class="title">视频模板</div>
                        <div class="title-f">视频左，文字右</div>
                        <input type="radio" name="moduleType" value="3">
                    </div>
                </div>
                <div class="layui-col-md4" style="text-align: center;">
                    <div class="k-w">
                        <div class="layui-row tu-qu">
                            <div class="layui-col-xs6 layui-col-md6">
                                <img src="./img/video.png" alt="">
                            </div>
                            <div class="layui-col-xs6 layui-col-md6">
                                <img src="./img/lable.png " alt="">
                            </div>
                        </div>
                        <div class="title">视频模板</div>
                        <div class="title-f">文字左，视频右</div>
                        <input type="radio" name="moduleType" value="4">
                    </div>
                </div>
                <div class="layui-col-md4" style="text-align: center;">
                    <div class="k-w">
                        <div class="layui-row tu-qu">
                            <div class="layui-col-xs6 layui-col-md6">
                                <img src="./img/video.png" alt="">
                            </div>
                            <div class="layui-col-xs6 layui-col-md6">
                                <img src="./img/video.png " alt="">
                            </div>
                        </div>
                        <div class="title">视频模板</div>
                        <div class="title-f">双视频</div>
                        <input type="radio" name="moduleType" value="5">
                    </div>
                </div>
            </div>
        </div>
        <div style="text-align: center;padding: 20px;">
            <button class="layui-btn" lay-submit lay-filter="formDemo">添加</button>
        </div>
    </form>


    <script>
        layui.use(['form', 'jquery'], function () {
            var $ = layui.$;
            var form = layui.form;

            var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
            //监听提交
            form.on('submit(formDemo)', function (data) {
                layer.msg(JSON.stringify(data.field));
                parent.appVue.addModule(data.field.moduleType);
                parent.layer.close(index);
                return false;
            });

        });
    </script>
</body>

</html>